<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Image</title>
		<style type="text/css" rel="stylesheet">
			body {
				margin: 0;
				font:12px/1.5 "sans serif",tahoma,verdana,helvetica;
				background-color:#F0F0EE;
				color:#222222;
				overflow:hidden;
			}
			form {
				margin:0;
			}
			label {
				cursor:pointer;
			}
			#resetBtn {
				margin-left:10px;
				cursor:pointer;
			}
			.main {
				margin: 0 10px;
			}
			.clearfix:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			.tab-navi {
				width:98%;
				border-bottom:1px solid #A0A0A0;
				padding-left:5px;
				margin-bottom:10px;
				
			}
			.tab-navi ul  {
				list-style-image:none;
				list-style-position:outside;
				list-style-type:none;
				margin:0;
				padding:0;
			}
			.tab-navi li {
				position: relative;
				border: 1px solid #A0A0A0;
				background-color: #E0E0E0;
				margin: 0 2px -1px 0;
				padding: 0 20px;
				float: left;
				line-height: 25px;
				text-align: center;
				color: #555555;
				cursor: pointer;
			}
			.tab-navi li.selected {
				background-color: #F0F0EE;
				border-bottom: 1px solid #F0F0EE;
				color: #000000;
				cursor: default;
			}
			.tab-navi li.on {
				background-color: #F0F0EE;
				color: #000000;
			}
			.table  {
				list-style-image:none;
				list-style-position:outside;
				list-style-type:none;
				margin:0;
				padding:0;
				display:block;
			}
			.table li {
				padding:0;
				margin-bottom:10px;
				display:list-item;
			}
			.table li label {
				font-weight:bold;
			}
			.table li input {
				vertical-align:middle;
			}
			.table li img {
				vertical-align:middle;
			}
		</style>
		<script type="text/javascript">
			var KE = parent.KindEditor;
			location.href.match(/\?id=([\w-]+)/i);
			var id = RegExp.$1;
			var fileManager = null;
			var allowUpload = (typeof KE.g[id].allowUpload == 'undefined') ? true : KE.g[id].allowUpload;
			var isAdvPositionsValue = (typeof KE.g[id].IsAdvPositions == 'undefined')?true:KE.g[id].IsAdvPositions;
			var allowFileManager = (typeof KE.g[id].allowFileManager == 'undefined') ? false : KE.g[id].allowFileManager;
			var referMethod = (typeof KE.g[id].referMethod == 'undefined') ? '' : KE.g[id].referMethod;
			var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../php/upload_json.php' : KE.g[id].imageUploadJson;
			var fileCategoryJson = (typeof KE.g[id].fileCategoryJson == 'undefined') ? '' : KE.g[id].fileCategoryJson;
			var lang = KE.lang.plugins.image;

			KE.event.ready(function () {
			    var typeBox = KE.$('type', document);
			    var urlBox = KE.$('url', document);
			    var alignElements = document.getElementsByName('align');
			    var fileBox = KE.$('imgFile', document);
			    var widthBox = KE.$('imgWidth', document);
			    var heightBox = KE.$('imgHeight', document);
			    var titleBox = KE.$('imgTitle', document);
			    var resetBtn = KE.$('resetBtn', document);
			    var catDiv = KE.$('catDiv', document);
			    var fileCategory = KE.$('fileCategory', document);
			    var tabNavi = KE.$('tabNavi', document);
			    var defaultImg = KE.$('defaultImg', document);
			    var leftImg = KE.$('leftImg', document);
			    var rightImg = KE.$('rightImg', document);
			    var viewServer = KE.$('viewServer', document);
			    var liList = tabNavi.getElementsByTagName('li');
			    var isAdvPositions = KE.$('isAdvPositions', document);
			    isAdvPositions.value = isAdvPositionsValue;
			    var selectTab = function (num) {
			        if (num == 1) {
			            resetBtn.style.display = 'none';
			            if (!isAdvPositionsValue) {
			                catDiv.style.display = '';
			                httpRequest('', getFileCategory);
			            }
			        } else {
			            resetBtn.style.display = '';
			            catDiv.style.display = 'none';
			        }
			        widthBox.value = '';
			        heightBox.value = '';
			        titleBox.value = '';
			        alignElements[0].checked = true;
			        for (var i = 0, len = liList.length; i < len; i++) {
			            var li = liList[i];
			            if (i === num) {
			                li.className = 'selected';
			                li.onclick = null;
			            } else {
			                if (allowUpload) {
			                    li.className = '';
			                    li.onmouseover = function () { KE.addClass(this, 'on'); };
			                    li.onmouseout = function () { KE.removeClass(this, 'on'); };
			                    li.onclick = (function (i) {
			                        return function () {
			                            if (!fileManager) selectTab(i);
			                        };
			                    })(i);
			                } else {
			                    li.parentNode.removeChild(li);
			                }
			            }
			            KE.$('tab' + (i + 1), document).style.display = 'none';
			        }
			        typeBox.value = num + 1;
			        KE.$('tab' + (num + 1), document).style.display = '';
			    }
			    if (!allowFileManager) {
			        viewServer.parentNode.removeChild(viewServer);
			        urlBox.style.width = '300px';
			    }
			    selectTab(0);
			    var imgNode = KE.plugin['image'].getSelectedNode(id);
			    if (imgNode) {
			        var tempDiv = KE.$$('div', KE.g[id].iframeDoc);
			        tempDiv.appendChild(imgNode.cloneNode(false));
			        var imgHtml = tempDiv.innerHTML;
			        var src = imgNode.src;
			        if (imgHtml.match(/kesrc="([^"]+)"/i)) src = RegExp.$1;
			        urlBox.value = src;
			        widthBox.value = imgNode.width;
			        heightBox.value = imgNode.height;
			        titleBox.value = (typeof imgNode.alt != 'undefined') ? imgNode.alt : imgNode.title;
			        for (var i = 0, len = alignElements.length; i < len; i++) {
			            if (alignElements[i].value == imgNode.align) {
			                alignElements[i].checked = true;
			                break;
			            }
			        }
			    }
			    KE.event.add(fileBox, 'change', function () {
			        if (fileBox.value.match(/.*\\(.*)\..*/i))
			            titleBox.value = RegExp.$1;
			    });
			    KE.event.add(viewServer, 'click', function () {
			        if (fileManager) return false;
			        fileManager = new KE.dialog({
			            id: id,
			            cmd: 'file_manager',
			            file: 'file_manager/file_manager.html?id=' + id + '&ver=' + KE.version,
			            width: 500,
			            height: 400,
			            loadingMode: true,
			            title: KE.lang.fileManager,
			            noButton: KE.lang.no,
			            afterHide: function () {
			                fileManager = null;
			            }
			        });
			        fileManager.show();
			    });
			    KE.$('uploadForm', document).action = imageUploadJson;
			    KE.$('referMethod', document).value = referMethod;
			    var alignIds = ['default', 'left', 'right'];
			    for (var i = 0, len = alignIds.length; i < len; i++) {
			        KE.event.add(KE.$(alignIds[i] + 'Img', document), 'click', (function (i) {
			            return function () {
			                KE.$(alignIds[i] + 'Chk', document).checked = true;
			            };
			        })(i));
			    }
			    KE.event.add(resetBtn, 'click', function () {
			        var g = KE.g[id];
			        var img = KE.$$('img', g.iframeDoc);
			        img.src = urlBox.value;
			        img.style.position = 'absolute';
			        img.style.visibility = 'hidden';
			        img.style.top = '0px';
			        img.style.left = '1000px';
			        g.iframeDoc.body.appendChild(img);
			        widthBox.value = img.width;
			        heightBox.value = img.height;
			        g.iframeDoc.body.removeChild(img);
			    });
			    KE.util.pluginLang('image', document);
			    viewServer.value = lang.viewServer;
			    resetBtn.alt = resetBtn.title = lang.resetSize;
			    defaultImg.alt = defaultImg.title = lang.defaultAlign;
			    leftImg.alt = leftImg.title = lang.leftAlign;
			    rightImg.alt = rightImg.title = lang.rightAlign;
			    KE.util.hideloadingPage(id);

			    var httpRequest = function (param, func) {
			        KE.util.showloadingPage(id);
			        var req = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
			        var url = fileCategoryJson;
			        url += param;
			        url += (url.match(/\?/) ? "&time=" : "?time=") + (new Date()).getTime()
			        req.open('GET', url, true);
			        req.onreadystatechange = function () {
			            if (req.readyState == 4) {
			                if (req.status == 200) {
			                    func(req.responseText);
			                    KE.util.pluginLang('image', document);
			                    KE.util.hideloadingPage(id);
			                }
			            }
			        };
			        req.send(null);
			    };
			    var getFileCategory = function (responseText) {
			        var result = KE.util.parseJson(responseText);
			        var categoryList = result.category_list;
			        if (typeof categoryList == 'undefined') {
			            catDiv.style.display = 'none';
			        }
			        else {
			            var istemp = false;
			            for (var i = 0, len = categoryList.length; i < len; i++) {
			                var data = categoryList[i];
			                fileCategory.options[i] = new Option(data.cName, data.cId);
			                if (data.cId == "AdvertImg") {
			                    istemp = true;
			                }
			            }
			            if (!istemp) {
			                var userAgent = window.navigator.userAgent;
			                if (userAgent.indexOf("MSIE") > 0) {
			                    var option = document.createElement("option");
			                    option.value = "0";
			                    option.innerText = lang.defaultCategory;
			                    fileCategory.insertBefore(option, fileCategory.options[0]);
			                } else {
			                    fileCategory.insertBefore(new Option("0", lang.defaultCategory), fileCategory.options[0]);
                            }
			            }
			        }
			    }
			}, window, document);
		</script>
	</head>
	<body>
		<div class="main">
			<div id="tabNavi" class="tab-navi">
				<ul class="clearfix">
					<li><span id="lang.remoteImage"></span></li>
					<li><span id="lang.localImage"></span></li>
				</ul>
			</div>
			<iframe name="uploadIframe" id="uploadIframe" style="display:none;"></iframe>
			<input type="hidden" id="type" name="type" value="" />
			<form id="uploadForm" name="uploadForm" method="post" enctype="multipart/form-data" target="uploadIframe">
				<input type="hidden" id="editorId" name="id" value="" />
				<input type="hidden" id="referMethod" name="referMethod" value="" />
				<input type="hidden" name="imgBorder" value="0" />
				<input type="hidden" id="isAdvPositions" name="isAdvPositions" value=""/>
				<ul class="table">
					<li>
						<div id="tab1" style="display:none;">
							<label for="url"><span id="lang.remoteUrl"></span></label>&nbsp;
							<input type="text" id="url" name="url" value="http://" maxlength="255" style="width:230px;" />
							<input type="button" id="viewServer" name="viewServer" value="" />
						</div>
						<div id="tab2" style="display:none;">
							<label for="imgFile"><span id="lang.localUrl"></span></label>&nbsp;
							<input type="file" id="imgFile" name="imgFile" style="width:300px;" />
						</div>
					</li>
					<li>
						<div id="catDiv" style="display:none;">
							<label for="fileCategory"><span id="lang.fileCategory"></span></label>&nbsp;
							<select id="fileCategory" name="fileCategory"></select>
						</div>
					</li>
					<li>
						<label for="imgWidth"><span id="lang.size"></span></label>&nbsp;
						<span id="lang.width"></span> <input type="text" id="imgWidth" name="imgWidth" value="" maxlength="4" style="width:50px;text-align:right;" />
						<span id="lang.height"></span> <input type="text" id="imgHeight" name="imgHeight" value="" maxlength="4" style="width:50px;text-align:right;" />
						<img src="./images/refresh.gif" width="16" height="16" id="resetBtn" alt="" title="" />
					</li>
					<li>
						<label><span id="lang.align"></span></label>&nbsp;
						<input type="radio" id="defaultChk" name="align" value="" checked="checked" /> <img id="defaultImg" src="./images/align_top.gif" width="23" height="25" border="0" alt="" title="" />
						<input type="radio" id="leftChk" name="align" value="left" /> <img id="leftImg" src="./images/align_left.gif" width="23" height="25" border="0" alt="" title="" />
						<input type="radio" id="rightChk" name="align" value="right" /> <img id="rightImg" src="./images/align_right.gif" width="23" height="25" border="0" alt="" title="" />
					</li>
					<li>
						<label for="imgTitle"><span id="lang.imgTitle"></span></label>
						<input type="text" id="imgTitle" name="imgTitle" value="" maxlength="255" style="width:95%;" />
					</li>
				</ul>
			</form>
		</div>
	</body>
</html>
